<template>
  <view class="my global-m">
    <!-- #ifndef H5 -->
    <view style="height: 44px"></view>
    <!-- #endif -->
    <view class="my-title">
      <view class="flex-1">
        <wd-button @click="downApp" size="small">打开App</wd-button>
      </view>
      <!-- <image
        style="height: 24px"
        mode="heightFix"
        src="/static/assets/my/set.png"
      /> -->
    </view>
    <wd-gap height="1rem"></wd-gap>
    <view class="my-header">
      <wd-cell use-icon-slot use-title-slot center>
        <template #icon>
          <wd-img
            width="65"
            height="65"
            round
            :src="
              isLogin
                ? userInfo?.imgurl || '/static/assets/my/tx.png'
                : '/static/assets/my/avatar.png'
            "
          ></wd-img>
        </template>
        <template #title v-if="!isLogin">
          <view
            @click="toLogin"
            style="
              font-size: 30rpx;
              font-weight: bold;
              display: flex;
              align-items: center;
              height: 100%;
              padding-left: 10px;
              box-sizing: border-box;
            "
            >点击登录/注册</view
          >
        </template>
        <template #title v-else>
          <view @click="toRouter('/pages/my/profile')">
            <view class="d-flex" style="margin-left: 0.6rem">
              <view style="font-size: 1.2rem; margin-right: 0.5rem">
                {{
                  userInfo?.username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
                }}
              </view>
              <wd-img
                width="15"
                height="15"
                src="/static/assets/my/edit.png"
              ></wd-img>
            </view>
            <view
              class="d-flex"
              style="margin: 0.5rem 0 0 0.5rem"
              v-if="userInfo?.vip"
            >
              <wd-img
                width="15"
                height="15"
                src="/static/assets/my/jiangzhang.png"
              ></wd-img>
              <view style="margin-left: 0.2rem"></view>
              <wd-img
                width="20"
                height="15"
                src="/static/assets/my/dl.png"
              ></wd-img>
            </view>
          </view>
        </template>
        <template>
          <view class="my-title">
            <image
              style="height: 24px"
              mode="heightFix"
              @click="openPop"
              src="/static/assets/my/set.png"
            />
          </view>
        </template>
      </wd-cell>
    </view>
    <view
      v-if="!userInfo?.vip"
      class="member-box"
      @click="toRouter('/pages/my/vip')"
    >
      <image
        class="bg"
        src="https://yonganpicture.oss-cn-shenzhen.aliyuncs.com/vip-bg.png"
      ></image>
      <wd-img
        width="170"
        height="34"
        src="/static/assets/my/vip-txt.png"
      ></wd-img>
      <wd-img
        width="79"
        height="23"
        src="/static/assets/my/vip-click.png"
      ></wd-img>
    </view>
    <view class="my-card">
      <wd-card title="常用功能">
        <view class="common-ul">
          <view class="d-flex-center" @click="toRouter('/pages/my/favorite')">
            <view class="my-li d-flex-center">
              <image
                style="height: 35px"
                mode="heightFix"
                src="/static/assets/my/li1.png"
              ></image>
              <view style="margin-left: 0.5rem">我的喜欢</view>
            </view>
          </view>
          <view class="d-flex-center" @click="toRouter('/pages/my/download')">
            <view class="my-li d-flex-center">
              <image
                style="height: 35px"
                mode="heightFix"
                src="/static/assets/my/li2.png"
              ></image>
              <view style="margin-left: 0.5rem">我的下载</view>
            </view>
          </view>
        </view>
      </wd-card>
    </view>
    <view class="my-card">
      <wd-card title="我的设置">
        <view class="set-ul">
          <view class="set-li" @click="toRouter('/pages/my/switch')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/s1.png"
              ></image>
            </view>
            <view> 功能开关 </view>
          </view>
          <view class="set-li" @click="toRouter('/pages/my/wallpaper')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/s2.png"
              ></image>
            </view>
            <view> 壁纸设置 </view>
          </view>
          <view class="set-li" @click="toRouter('/pages/my/chat')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/s3.png"
              ></image>
            </view>
            <view> 聊天皮肤 </view>
          </view>
          <view class="set-li" @click="openPop">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/s4.png"
              ></image>
            </view>
            <view> 其他设置 </view>
          </view>
          <!-- <view class="set-li">
            <view>
              <image style="height: 26px;" mode="heightFix" src="/static/assets/my/s5.png"></image>
            </view>
            <view>
              功能修复
            </view>
          </view> -->
        </view>
      </wd-card>
    </view>
    <view class="my-card">
      <wd-card title="我的服务">
        <view class="set-ul">
          <view class="set-li" @click="toRouter('/pages/my/feedback')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/f1.png"
              ></image>
            </view>
            <view> 问题反馈 </view>
          </view>
          <view class="set-li" @click="toRouter('/pages/my/qa')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/f2.png"
              ></image>
            </view>
            <view> 常见问题 </view>
          </view>
          <view class="set-li" @click="toRouter('/pages/my/kf')">
            <view>
              <image
                style="height: 26px"
                mode="heightFix"
                src="/static/assets/my/f3.png"
              ></image>
            </view>
            <view> 联系客服 </view>
          </view>
        </view>
      </wd-card>
    </view>
  </view>
  <wd-popup
    v-model="showPopup"
    position="right"
    :z-index="999"
    @close="handleClose"
  >
    <wd-gap :height="`${$statusBarHeight + 44}px`"></wd-gap>
    <template v-for="(item, index) in rightConfigList" :key="index">
      <view class="right_pop_box d-flex" @click="item.clickCallback">
        <wd-img width="19" height="19" :src="item.icon"></wd-img>
        <text style="margin-left: 10px">{{ item.title }}</text>
      </view>
      <!-- <view v-if="isFirst && index === 1" class="d-flex-center">
			   <wd-img src="/static/assets/my/fig-tip.png" width="127" height="55"></wd-img>
		   </view> -->
    </template>
  </wd-popup>
  <NavBar :index="4"></NavBar>
</template>

<script setup>
import NavBar from "@/section/a-navbar.vue";
import { toRouter } from "@/hooks/utils";
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import store from "../../store";

const userInfo = computed(() => {
  return store.state.value.userInfo;
});
const isLogin = computed(() => userInfo.value);
const showPopup = ref(false);
const isFirst = ref(true);
const rightConfigList = ref([
  {
    title: "关于我们",
    icon: "/static/assets/my/fig1.png",
    clickCallback: function () {
      toRouter("/pages/my/aboutus");
    },
  },
  // {
  // 	title: '其他设置',
  // 	icon: '/static/assets/my/fig2.png',
  // 	clickCallback: function() {

  // 	}
  // },
  // {
  // 	title: '修改内容推荐偏好',
  // 	icon: '/static/assets/my/fig3.png',
  // 	clickCallback: function() {
  // 		closePop()
  // 		toRouter('/pages/my/preferences');
  // 		isFirst.value = false
  // 	}
  // },
  {
    title: "账户管理",
    icon: "/static/assets/my/fig4.png",
    clickCallback: function () {
      closePop();
      toRouter("/pages/my/manage");
    },
  },
]);

const openPop = () => {
  showPopup.value = true;
};
const closePop = () => {
  setTimeout(() => {
    showPopup.value = false;
  }, 200);
};
const toLogin = () => {
  console.log("====");
  toRouter("/pages/login/index");
};
const handleClose = () => {};
const downApp = () => {
  uni.showModal({
    title: "提示",
    content: "去下载app",
    success: (res) => {
      if (res.confirm) {
        uni.setClipboardData({
          data: 'https://yonganpicture.oss-cn-shenzhen.aliyuncs.com/13168717292/wallpaper.apk',
          success: function (res) {
            uni.showToast({
              title: '已复制到剪贴板,请在浏览器复制打开',
              icon: 'none'    
            })
          }
        })
      }
    },
  });
}
</script>

<style scoped lang="scss">
page {
  background: rgb(245, 245, 245);
}
.my {
  background: rgb(245, 245, 245)
    url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat;
  background-size: 100% 500px;
}
.my-header {
  --wot-color-white: none;
  --wot-size-side-padding: 0;
}
.my-title {
  display: flex;
  align-items: center;
  --wot-button-primary-bg-color:#F934A5;
}
.common-ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.4rem;
}
.my-card {
  --wot-card-margin: 0;
  --wot-card-footer-padding: 0.4rem;
}
.my-li {
  border-radius: 10px;
  width: 110px;
  padding: 10px;
  color: #222;
  background: linear-gradient(rgb(250, 235, 235), rgb(253, 248, 248));
}
.set-ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  color: #222;
}
.set-li {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.member-box {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36rpx;
  position: relative;
  height: 71px;
  box-sizing: border-box;
  margin-bottom: 15px;
  .bg {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.right_pop_box {
  padding: 40rpx;
}
</style>